<template>

    <header class="navbar">
        <div class="left" @click="goBack">
            <van-image :src="Logo" class="logo" />
        </div>
        <div class="menu">
            <ul>
                <li v-for="(menu, index) in menus" :key="menu.path" :class="{ active: currentIndex === index }"
                    @click="goToDir(menu.path)">{{ menu.name }}</li>
            </ul>
        </div>
        <div class="openApp">
            <van-button type="danger" round class="button">打开App</van-button>
        </div>
    </header>

</template>


<script setup>
import { ref, computed, inject, onMounted } from "vue"

import Logo from "@/assets/logo.png"
import { useRouter } from "vue-router"
const router = useRouter()

const registerComponentLoad = inject('registerComponentLoad', () => { })

const menus = [
    {
        name: '推荐',
        path: '/',
    },
    {
        name: '排行',
        path: '/rank',
    },
    {
        name: '分类',
        path: '/category',
    }
];

const currentIndex = computed(() => {
    return menus.findIndex(item => item.path === router.currentRoute.value.path)
})


onMounted(() => {

    registerComponentLoad()

})


const goToDir = (path) => {
    router.push({ path: path })
}


const goBack = () => {
    router.go(-1)
};



</script>


<style scoped lang="scss">
.navbar {
    height: 44px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    z-index: 10001;
    background-color: #fff;

    .left {
        height: 44px;
        overflow: hidden;

        .logo {
            height: 30px;
            width: 30px;
            padding: 7px 10px;
        }
    }

    .menu {
        height: 44px;
        display: flex;
        /* 添加此行 */
        align-items: center;

        /* 添加此行 */
        ul {
            display: flex;
            gap: 30px;
            margin: 0;
            /* 可选：清除默认margin */
            padding: 0;

            /* 可选：清除默认padding */
            li {
                list-style: none;
                /* 可选：清除列表样式 */
            }

            .active {
                color: #fb7299
            }
        }
    }

    .openApp {
        height: 44px;
        display: flex;
        /* 添加此行 */
        align-items: center;
        /* 添加此行 */

        padding-right: 10px;

        .button {
            height: 30px;

        }

    }
}
</style>